<template>
  <div class="classify">
    <el-table :data="classifyList" height="500" border style="width: 95%">
      <el-table-column type="index" label="#" width="100"> </el-table-column>
      <el-table-column label="类别管理">
        <template slot-scope="scope">
          <div v-if="scope.$index == 0">
            <el-input
              @keyup.enter.native="handleAddClk"
              v-focus
              v-model="input"
              placeholder="请输入类别"
            ></el-input>
          </div>
          <div v-else>
            <el-input
              v-focus
              @blur="handleEnter"
              @keyup.esc.native="handleEsc"
              @keyup.enter.native="handleEnter"
              v-if="scope.row.id == editRow.id"
              v-model="editRow.name"
              placeholder="请输入类别"
            ></el-input>
            <div @dblclick="handleEditClk(scope.row)" v-show="scope.row.id != editRow.id">
              <el-button type="primary" icon="el-icon-delete">
                {{ scope.row.name }}</el-button
              >
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            v-if="scope.$index == 0"
            @click="handleAddClk"
            type="success"
            size="small"
            >保存</el-button
          >
          <div v-else>
            <el-button @click="handleEditClk(scope.row)" type="warning" size="small"
              >修改</el-button
            >
            <el-button type="danger" @click="handleDelClk(scope.row.id)" size="small"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      input: "",
      editRow: {},
    };
  },
  mounted() {
    this.getClassify();
  },
  methods: {
    ...mapActions("classify", [
      "getClassify",
      "saveClassify",
      "delClassify",
      "EditClassify",
    ]),
    // 增加事件
    async handleAddClk() {
      if (!this.input.trim().length) return;
      await this.saveClassify(this.input);
      this.input = "";
    },
    // 删除事件
    async handleDelClk(id) {
      this.$confirm("此操作将删除该类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.delClassify(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // enter事件
    async handleEnter() {
      if (this.editRow.name && this.editRow.name.trim()) {
        await this.EditClassify(this.editRow);
      } else {
        await this.delClassify(this.editRow.id);
      }

      this.editRow = {};
    },
    // 双击和修改的事件
    handleEditClk(row) {
      this.editRow = { ...row };
    },
    // esc事件
    handleEsc() {
      this.editRow = {};
    },
  },
  directives: {
    focus: {
      inserted(el) {
        el.children[0].focus();
      },
    },
  },
  computed: {
    ...mapState("classify", ["classifyList"]),
  },
};
</script>

<style scoped>
.classify {
  margin: 70px 0 0 50px;
}
</style>
